<template>
  <div>
    <div>欢迎光临 vue开发的收银系统 水果店</div>
    <table border="1" cellpadding="10" rules="all" width="400" align="center">
      <tr>
        <th>苹果 {{ price }} ￥ / 斤，折扣 &lt; {{ discount }}折 &gt;</th>
      </tr>
      <tr align="center">
        <td>
          请输入你要购买的斤数<input type="number" v-model.number="num" />
        </td>
      </tr>
      <tr>
        <td><button @click="buy">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价：{{ total }}￥ 折后价：{{ after }}￥ 省了：{{ free }}￥
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      discount: 8,
      num: 1,
      total: 0,
      after: 0,
      free: 0,
    };
  },
  methods: {
    buy() {
      this.total = this.price * this.num;
      this.after = (this.total * this.discount) / 10;
      this.free = this.total - this.after;
    },
  },
};
</script>

<style>
div {
  text-align: center;
}
</style>